<template>
  <div>
    <ul>
        <li v-for="m in messageList" :key="m.id">
          <!-- 1.跳转路由并携带params参数 to 的字符串写法 根据路由占位符传参-->
          <!-- :to把双引号里面的当成js去解析，解析`是模板字符串，模板字符串混着 js变量 写就是用${} -->
            <!-- <router-link :to="`/home/message/detail/${m.id}/${m.title}`">
              {{m.title}}
            </router-link>&nbsp;&nbsp; -->
            <!-- 2.跳转路由并携带params参数 to 的对象写法 -->
            <router-link :to="{
              //path:'/home/message/detail',
              //根据路由名字跳转--必须使用路由name跳转
              name:'xiangqing',
              params:{
                id:m.id,
                titleName:m.title
              }
            }">
              {{m.title}}
            </router-link>  &nbsp;&nbsp;
            <button @click="pushShow(m)">push查看</button>
            <button @click="replaceShow(m)">replace查看</button>
        </li>
    </ul>
    <hr/>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name:'Message',
    data(){
      return {
        messageList:[
          {id:'001',title:'消息001'},
          {id:'002',title:'消息002'},
          {id:'003',title:'消息003'}
        ]
      }
    },
    beforeDestroy(){
        console.log('Message组件即将被销毁了')
    },
    methods: {
      pushShow(m){
        this.$router.push({
          name:'xiangqing',
          params:{
            id:m.id,
            titleName:m.title
          }
        })
      },
       replaceShow(m){
        this.$router.replace({
          name:'xiangqing',
          params:{
            id:m.id,
            titleName:m.title
          }
        })
      }
    },
}
</script>
